<ion-view view-title="Checkout">
  <ion-content style="background: #f7f7f7;color: #4d4d4d">
    <!-- part one-->
    <div style="background: #fff;width: 100%;float: left;">
      <div style="width: 94%;margin-left: 3%;border-bottom: 1px #f7f7f7 solid;height:45px;line-height: 45px;color: #b5b5b5">
        Delivery Times
      </div>

      <div style="width: 100%;background: #fff;float: left;padding: 8px 3% 0px 3%;">
        <img src="img/payCard.png" class="imglocationSC" style="width: 5%">
        <div style="width: 34%;color: #4d4d4d;display: inline-block;vertical-align: middle;">Pay With</div>
        <div style="width: 45%;color: #65c178;display: inline-block;vertical-align: middle;text-align: right">Add credit/debit card</div>
        <div style="display: inline-block;vertical-align: middle;float: right">
          <i class="icon ion-ios-arrow-right" style="font-size: 25px;color: #65c178"></i>
        </div>
        <div class="divbottomBlankAll"></div>
      </div>
      <div style="width: 100%;background: #fff;float: left;padding: 5px 3% 5px 3%;">
        <img src="img/exclamationShade.png" class="imglocationSC" style="width: 5%">
        <div style="width: 88%;color: #b5b5b5;display: inline-block;vertical-align: middle;word-break:break-all">Payment processing is supported by Stripe.
        We do not save your credit card information.Transactions are all encrypted.</div>
      </div>
    </div>


<!--part two-->
    <div style="background: #fff;width: 100%;float: left;margin-top: 30px;">

      <div style="width: 100%;background: #fff;float: left;padding: 10px 3% 0px 3%;">
        <div style="width: 50%;color: #4d4d4d;display: inline-block;vertical-align: middle;">Subtotal</div>
        <div style="width: 47%;color: #65c178;display: inline-block;vertical-align: middle;text-align: right;float: right">+1-(217)-979-5555</div>
        <div class="divbottomBlankAll"></div>
      </div>


      <div style="width: 100%;background: #fff;float: left;padding: 10px 3% 0px 3%;">
        <div style="width: 8%;color: #4d4d4d;display: inline-block;vertical-align: middle;">Tax</div>
        <img src="img/exclamation.png" style="width: 5%;margin-left:0%;vertical-align: middle;display: inline-block">
        <div style="width: 83%;color: #65c178;display: inline-block;vertical-align: middle;text-align: right;float: right">+1-(217)-979-5555</div>
        <div class="divbottomBlankAll"></div>
      </div>


      <div style="width: 100%;background: #fff;float: left;padding: 10px 3% 0px 3%;">
        <div style="width: 50%;color: #4d4d4d;display: inline-block;vertical-align: middle;">Delivery fees</div>
        <div style="width: 47%;color: #65c178;display: inline-block;vertical-align: middle;text-align: right;float: right">$3.24</div>
        <div class="divbottomBlankAll"></div>
      </div>


      <div style="width: 100%;background: #fff;float: left;padding: 8px 3% 0px 3%;">
        <div style="width: 9%;color: #4d4d4d;display: inline-block;vertical-align: middle;">Tips</div>
        <div style="width: 83%;color: #65c178;display: inline-block;vertical-align: middle;text-align: right">+1-(217)-979-5555</div>
        <div style="display: inline-block;vertical-align: middle;float: right">
          <i class="icon ion-ios-arrow-right" style="font-size: 25px;color: #65c178"></i>
        </div>
        <div class="divbottomBlankAll"></div>
      </div>

    </div>


    <!--part three -->
    <div style="background: #fff;width: 100%;float: left;margin-top: 30px;">
      <div style="width: 94%;margin-left: 3%;border-bottom: 1px #f7f7f7 solid;height:45px;line-height: 45px;color: #b5b5b5">
        Discount Codes
      </div>

      <div style="width: 100%;background: #fff;float: left;padding: 8px 3% 0px 3%;">
        <img src="img/pointU.png" class="imglocationSC" style="width: 5%">
        <div style="width: 79%;color: #4d4d4d;display: inline-block;vertical-align: middle;">Enter your coupon code if you have one</div>
        <div style="display: inline-block;vertical-align: middle;float: right">
          <i class="icon ion-ios-arrow-right" style="font-size: 25px;color: #65c178"></i>
        </div>
        <div class="divbottomBlankAll"></div>
      </div>
    </div>


    <div style="width: 100%;float: left;height: 100px;"></div>

    <style type="text/css">
      .itemDiv{width: 100%;background: #fff;float: left;padding: 10px 3%  3%;}
      .imglocationSC{width: 4%;margin-right:4%;vertical-align: middle;display: inline-block}
      .divbottomBlank{width: 94%;margin-left:3%;height: 10px;border-bottom: 1px solid #f7f7f7}
      .divbottomBlankAll{width: 100%;height: 10px;border-bottom: 1px solid #f7f7f7}

    </style>
    <div data-role="fieldcontain" class="demo-select-opt">
      <label for="names">级联下拉-高分电影</label>
      <select id="names" class="demo-test-select-opt" data-role="none">
        <optgroup label="Tomorrow">
          <option value="78">3am-9am</option>
          <option value="79">3am-9am</option>
          <option value="80">3am-9am</option>
          <option value="81">3am-9am</option>
          <option value="82">13am-19am</option>
          <option value="83">13am-19am</option>
          <option value="84">3am-9am</option>
        </optgroup>
        <optgroup label="Aug 24,tueswewq">
          <option value="78">3am-9am</option>
          <option value="79">3am-9am</option>
          <option value="80">3am-9am</option>
          <option value="81">3am-9am</option>
          <option value="82">13am-19am</option>
          <option value="83">13am-19am</option>
          <option value="84">3am-9am</option>
        </optgroup>
        <optgroup label="青春片" selected>
          <option value="78">3am-9am</option>
          <option value="79">3am-9am</option>
          <option value="80">3am-9am</option>
          <option value="81">3am-9am</option>
          <option value="82">13am-19am</option>
          <option value="83">13am-19am</option>
          <option value="84">3am-9am</option>
        </optgroup>
        <optgroup label="科幻片">
          <option value="78">3am-9am</option>
          <option value="79">3am-9am</option>
          <option value="80">3am-9am</option>
          <option value="81">3am-9am</option>
          <option value="82">13am-19am</option>
          <option value="83">13am-19am</option>
          <option value="84">3am-9am</option>
        </optgroup>
        <optgroup label="剧情片">
          <option value="78">3am-9am</option>
          <option value="79">3am-9am</option>
          <option value="80">3am-9am</option>
          <option value="81">3am-9am</option>
          <option value="82">13am-19am</option>
          <option value="83">13am-19am</option>
          <option value="84">3am-9am</option>
        </optgroup>
      </select>
    </div>
  </ion-content>

  <div class="mainBottomdiv">
    <div ng-click="tgocheckout()" class="mainBottombutton">Place Order</div>
  </div>

</ion-view>
